<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">


</head>
<body>
<div id="div1" class="container">
    <table class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <th v-for="(item,index) in this.books[0]">{{index}}</th>
            <th>小计</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <th v-for="(item,index) in this.books[0]">{{index}}</th>
            <th>小计</th>
        </tr>
        </tfoot>
        <tbody>
        <tr v-for="item in this.books">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td><input type="number" v-model="item.num"></td>
            <td>{{item.price * item.num | saveFixed(1)}}</td>
        </tr>
        </tbody>
    </table>
    <div>
        总计:{{total | saveFixed(2)}}
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#div1',
        data: {
            count: 1,
            books: [{
                id: 1,
                name: '西游记',
                price: 18.8,
                num: 6
            }, {
                id: 2,
                name: '红楼梦',
                price: 20.8,
                num: 3
            }, {
                id: 3,
                name: '水浒传',
                price: 7.8,
                num: 16
            }, {
                id: 4,
                name: '三国演义',
                price: 28.8,
                num: 2
            }],
        },
        computed: {
            total() {
                let sum = 0
                for (const book of this.books) {
                    sum += book.price * book.num;
                }
                return sum;
            }
        },
        filters: {
            saveFixed(val, n) {
                return val.toFixed(n)
            }
        },
        watch: {},
        created() {
        },
        mounted() {
        },
        beforeDestroy() {
        },
        methods: {}
    })
</script>
</body>
</html>